<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import screenfull from "screenfull";
const isEnabled = ref(true);
const fullScreen = () => {
  if (isEnabled.value) {
    const element = document.getElementById("executiveWorkbench"); //指定全屏区域元素
    if (screenfull.isEnabled) {
      screenfull.request(element);
    }
  } else {
    screenfull.exit();
  }
};
onMounted(() => {
  document.addEventListener("fullscreenchange", () => {
    isEnabled.value = !isEnabled.value;
  });
});
onUnmounted(() => {
  document.removeEventListener;
});
</script>

<template>
  <div></div>
  <div id="executiveWorkbench">
    <div>
      <p>screenfull插件</p>
      <el-button @click="fullScreen">{{
        isEnabled ? "全屏展示" : "退出全屏"
      }}</el-button>
    </div>
  </div>
</template>

<style scoped></style>
